<template>
  <m-container bg="#fff">
    <view class="profile">
      <view class="profile__cell">
        <m-cell
          size="lg"
          :title="info.userId ? info.nickName : '点击登录'"
          :sub-title="info.userId && '用户ID：' + info.userId"
          is-link
          desc="编辑资料"
          :to="{ name: 'MyEditProfile' }"
        >
          <u-image slot="icon" show-loading :src="getAvatar(info.avatar)" width="104rpx" height="104rpx" shape="circle">
            <u-icon slot="error" name="account-fill"></u-icon>
          </u-image>
        </m-cell>
      </view>
      <u-gap height="20" bg-color="#f1f1f1"></u-gap>
      <m-cell-group :inset="false">
        <m-cell icon="security-code" v-if="info.userId" title="设置密码" is-link :to="{ name: 'PasswordSet' }"></m-cell>
        <m-cell is-link>
          <button class="btn" open-type="feedback">
            <view class="btn__left">
              <m-icon name="comments" size="40" color="#607e8d"></m-icon>
              <m-text color="#262626" size="28" marginLeft="20">意见反馈</m-text>
            </view>
            <m-icon name="arrow-right" size="24" color="#333"></m-icon>
          </button>
        </m-cell>
      </m-cell-group>

      <u-button
        v-if="info.userId"
        @click="handleLogOUt"
        shape="circle"
        ripple
        :custom-style="{ margin: '160rpx 20rpx' }"
      >
        登出
      </u-button>
    </view>
  </m-container>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, computed } from '@vue/composition-api'
import store from '@/store/index'
import { router } from '@/router'
import { showModal } from '@/hooks'
import filters from '@/utils/filters'
import getAvatar from '@/utils/get-avatar'

export default defineComponent({
  setup() {
    const state = reactive({
      iconStyle: { color: '#4d9af9' },
      filters,
      getAvatar,
    })
    const info = computed(() => (store as any).getters['login/getUserInfo'])

    const handleLogOUt = () => {
      showModal({
        content: '确定退出登录吗?',
        showCancelButton: true,
        confirm: async () => {
          await store.dispatch('login/logout')
          router.replace({
            name: 'UserLogin',
          })
        },
      })
    }

    return {
      ...toRefs(state),
      info,
      handleLogOUt,
    }
  },
})
</script>
<style lang="scss">
.profile {
  .circle {
    border-radius: 100px;
    overflow: hidden;
    width: 104rpx;
    height: 104rpx;
  }

  .btn {
    background: transparent;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #fff;
    justify-content: space-between;
    line-height: unset;

    &__left {
      display: flex;
    }

    &::after {
      border-width: 0;
    }
  }

  ::v-deep {
    .icon {
      color: #607e8d;
    }

    // #ifdef MP-WEIXIN
    .profile__cell {
      .badge--top-right {
        position: relative;
        top: -30rpx;
      }
    }

    // #endif
    .cell-group__wrap {
      margin: 0;
    }
  }
}
</style>
